<!DOCTYPE html>
<html>

<head>
    <title>成绩管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <!-- CSS App  -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">

 <!-- 引入vue框架 -->
 <script src="../lib/js/vue.js"></script>
 <!-- 引入axios库 -->
 <script src="../lib/js/axios.js"></script>
 <!-- 引入config -->
 <script src="../lib/js/config.js"></script>

    <style>
        /* 模态框样式 */
        .modal {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            /* 固定位置 */
            z-index: 1;
            /* 确保在最上层 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            /* 半透明背景 */
        }
        

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            /* 垂直居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            padding: 20px;
            border-radius: 8px;
            /* 圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        /* 表单字段样式 */
        .modal-content form {
            display: flex;
            flex-direction: column;
        }

        .modal-content form label {
            margin-top: 10px;
        }

        .modal-content form input {
            margin-top: 5px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            /* 输入框圆角 */
            transition: border-color 0.3s;
        }

        .modal-content form input:focus {
            border-color: #66afe9;
            outline: none;
        }

        .modal-content form button {
            margin-top: 20px;
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            /* 按钮圆角 */
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .modal-content form button:hover {
            background-color: #0056b3;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body class="flat-blue">
    <div class="app-container">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li>用户管理</li>
                            <li class="active">查看个人成绩</li>
                        </ol>
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">0</span>
                                </li>
                                <li class="message">
                                    No new notification
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown danger">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
                            <ul class="dropdown-menu danger  animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">4</span>
                                </li>
                                <li>
                                    <ul class="list-group notifications">
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge">1</span> <i
                                                    class="fa fa-exclamation-circle icon"></i> new registration
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge success">1</span> <i class="fa fa-check icon"></i>
                                                new orders
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge danger">2</span> <i class="fa fa-comments icon"></i>
                                                customers messages
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item message">
                                                view all
                                            </li>
                                        </a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown profile">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false">Emily Hart <span class="caret"></span></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="profile-img">
                                    <img src="../../img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                                </li>
                                <li>
                                    <div class="profile-info">
                                        <h4 class="username">Emily Hart</h4>
                                        <p>emily_hart@email.com</p>
                                        <div class="btn-group margin-bottom-2x" role="group">
                                            <button type="button" class="btn btn-default"><i class="fa fa-user"></i>
                                                Profile</button>
                                            <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i>
                                                Logout</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                <div class="icon fa fa-paper-plane"></div>
                                <div class="title">大学生信息管理系统</div>
                            </a>
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                <i class="fa fa-times icon"></i>
                            </button>
                        </div>
                        <ul class="nav navbar-nav">
                            <li>
                                <a href="../html/index.html">
                                    <span class="icon fa fa-tachometer"></span><span class="title">首页</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-element">
                                    <span class="icon fa fa-desktop"></span><span class="title">用户管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-element" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="./personalInformation.html">个人信息管理</a></li>
                                            <li><a href="./viewCourse.html">查看课程</a></li>
                            </li>
                        </ul>
                    </div>
            </div>
            </li>
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-table">
                    <span class="icon fa fa-table"></span><span class="title">学生信息管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-table" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./table/studentInformationManage.html">学生信息管理</a>
                            </li>
                            <li><a href="./table/deleteCourse.html">学生退课管理</a>
                            </li> 
                            <li><a href="./table/selectCourse.html">学生选课管理</a>
                            </li> 
                           
                        </ul>
                    </div>
                </div>
            </li>
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-form">
                    <span class="icon fa fa-file-text-o"></span><span class="title">班级管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-form" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./form/class.html">班级管理</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#component-example">
                    <span class="icon fa fa-cubes"></span><span class="title">课程管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="component-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="components/course.html">课程管理</a>
                            </li>
                            <!--<li><a href="../components/chartjs.html">Chart.JS</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="active panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-example">
                    <span class="icon fa fa-slack"></span><span class="title">成绩管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./score.html">学生查看个人成绩</a>
                            </li>
                            <li><a href="./scoreManagement.html">老师添加成绩、修改成绩</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-icon">
                    <span class="icon fa fa-archive"></span><span class="title">系统管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-icon" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="./log.html">日志管理</a>
                            </li>
                            <!--<li><a href="../icons/font-awesome.html">Font Awesomes</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="../license.html">
                    <span class="icon fa fa-thumbs-o-up"></span><span class="title">License</span>
                </a>
            </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
        </nav>
    </div>
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">

            <div class="row">


                <div class="col-md-4">
                    <!-- 首页 -->
                    <a href="./index.html">
                        <img src="../home.png" alt="">返回首页
                    </a>

                    <!-- 设置图标大小 -->
                    <style>
                        img {
                            width: 30px;
                            height: 30px;
                        }
                    </style>
                </div>

                <!-- 查询表单-->
              <!--   <div class="col-md-4">
                    <form class="form-inline">

                        <div class="form-group mx-sm-3 mb-2">
                            <label for="inputPassword2" class="sr-only">输入需查询成绩的课程</label>
                            <input type="text" class="form-control" id="inputPassword2" placeholder="输入查询信息">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2">查询</button>

                    </form>
                </div> -->

            </div>
            <div class="scoreInformationManagement" id="scoreInformationManagement">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">
                                <div class="title">成绩列表</div>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">学号</th>
                                        <th scope="col">姓名</th>
                                        <th scope="col">课程名</th>
                                        <th scope="col">成绩</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(score, index) in studentScoreList" :key="index">
                                        <th scope="row">{{ index + 1 }}</th>
                                        <td>{{ score.studentId }}</td>
                                        <td>{{ score.studentName }}</td>
                                        <td>{{ score.courseName }}</td>
                                        <td>{{ score.score }}</td>
                                    </tr>
                                </tbody>
                            </table>
            
                            <!-- 分页 -->
                            <div class="paging">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item disabled">
                                            <a class="page-link" tabindex="-1" aria-disabled="true">Previous</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                    <!--     <li class="page-item"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li> -->
                                        <li class="page-item">
                                            <a class="page-link" href="#">Next</a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          









            <script>
                Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。
                
                // 假设学生的 ID 存储在一个全局变量 studentId 中
                var studentId = 2; // 这里可以替换为实际获取的 studentId
                
                var scoreInformation = new Vue({
                    el: '#scoreInformationManagement',
                    data: {
                        studentScoreList: [], // 初始化为空数组
                        currentPage: 1, // 初始化为1
                        pageList: [], // 分页列表
                        keyword: '',
                        score: {
                            studentId: '',
                            studentName: '',
                            courseName: '',
                            score: ''
                        }
                    },
                    mounted() {
                        // 默认加载当前学生的成绩
                        this.queryScoreById(studentId);
                    },
                    methods: {
                        queryScoreById(studentId) {
                            if (!studentId) {
                                alert('学生ID无效');
                                return;
                            }
                            axios.get('/score/queryScoreById/' + studentId)
                                .then(response => {
                                    if (response.data.code === 200) { // 假设成功状态码为200
                                        this.studentScoreList = response.data.data;
                                    } else {
                                        alert('查询失败，请重试');
                                    }
                                })
                                .catch(error => {
                                    console.error('There was an error!', error);
                                    alert('查询失败，请重试');
                                });
                        }
                    }
                });





        </script>

    </div>


    </div>
    </div>

    <footer class="app-footer">
        <div class="wrapper">
            <span class="pull-right" style="text-align: center;">2.1 <a href="#"><i
                        class="fa fa-long-arrow-up"></i></a></span> © 2024-12-LUT-PRACTICE
        </div>
    </footer>









    <!-- Javascript Libs -->
    <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/js/Chart.min.js"></script>
    <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>

    <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
    <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script>
    <!-- Javascript -->
    <script type="text/javascript" src="../../js/app.js"></script>


</body>

</html>